{% extends "bash.html" %}
{% load static %}
{% block content %}

    <table class="table table-bordered table-striped text-center bg-info" id="show_number">
    <thead>
    <tr class="info">
        {% for t in listtab %}

            <th class="text-center">{{ t }}</th>>

        {% endfor %}
    </tr>
    </thead>
    <tbody>
        {% for x in list1 %}
            <tr>
                 <td id="{{ x.0 }}_1">
                    {{ x.0 }}
                </td>
                <td id="{{ x.0 }}_2">
                    {{ x.1 }}
                </td>
                <td id="{{ x.0 }}_3">
                    {{ x.2 }}
                </td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edit" data-whatever="{{ x.0 }}" >编辑</a>
                    <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add" data-whatever="新增" >新增</a>
                </td>
            </tr>
        {% endfor %}
    </tbody>
    </table>

    <div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="add11">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" >添加</h4>
                            </div>
                            <div class="modal-body">
                                <ul>
                                    <li>
                                        <label><span>URL</span></label>
                                        <input type="text" placeholder="www.baidu.com" id="add_url"/>
                                    </li>
                                    <li>
                                        <label><span>解析匹配</span></label>
                                        <input type="text" placeholder="百度" id="add_keyword"/>
                                    </li>
                                </ul>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary btn-sm" onclick="addUser()">保存</button>
                            </div>
                        </div>
                    </div>
                </div>


    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="add11">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" >编辑</h4>
                            </div>
                            <div class="modal-body">
                                <ul>
                                    <li>
                                        <label><span>规则序号</span></label>
                                        <input type="text" placeholder="www.baidu.com" id="number" readonly="readonly"/>
                                    </li>
                                    <li>
                                        <label><span>URL</span></label>
                                        <input type="text" placeholder="www.baidu.com" id="edit_url"/>
                                    </li>
                                    <li>
                                        <label><span>解析匹配</span></label>
                                        <input type="text" placeholder="百度" id="edit_keyword"/>
                                    </li>
                                </ul>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary btn-sm" onclick="editUser()">保存</button>
                            </div>
                        </div>
                    </div>
                </div>

{% endblock content %}

{% block script %}

    $('#edit').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever');// Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this);
    modal.find('.modal-title').text('编辑规则序列：' + recipient);
    modal.find('.modal-body input').val("")

    document.getElementById("number").value = recipient;
    document.getElementById("edit_url").value = document.getElementById(""+recipient+"_2").innerText;
    document.getElementById("edit_keyword").value = document.getElementById(""+recipient+"_3").innerText;

    })
    // 添加post 接口
    function addUser(){
        var add_url = document.getElementById("add_url").value
        var add_keyword = document.getElementById("add_keyword").value
        var staid = "1"
        $.post("{% url 'computerstatus:updatarul' %}",{'staid':staid,'add_url':add_url,'add_keyword':add_keyword},function(data,status){
            window.location.reload(data);
    })
    }

    // 修改post 接口
    function editUser(){
        var number = document.getElementById("number").value
        var edit_url = document.getElementById("edit_url").value
        var edit_keyword = document.getElementById("edit_keyword").value
        var staid = "2"
        $.post("{% url 'computerstatus:updatarul' %}",{'staid':staid,'number':number,'edit_url':edit_url,'edit_keyword':edit_keyword},function(data,status){
            window.location.reload(data);
    })
    }

{% endblock script %}